<template>
    <div class="BookBody" style="height: 850px;width: 1300px;margin: auto">

        <div style="width: 350px;height: 550px;float:left;">
            <div class="photo-background" style="margin-top: 20px">
                <div style="margin: 30px 0px 0px 0px">
                    <el-avatar :size="100" src="#">
                        <img :src="require('../img/'+imgurl)"/>
                    </el-avatar>
                </div>
                <h3 v-text="username">昵称</h3>
                <p v-text="id">id</p>
            </div>
            <header style="margin-right: 30px">
                <el-menu class="photo-bottom"
                         default-active="1"
                         text-color="black"
                         active-text-color="red" style="width: 300px;background-color: #FFB6C1;height: 380px;">
                    <el-menu-item index="1" style="height: 70px">
                        <i class="el-icon-star-on"></i>
                        <router-link style="text-decoration:none;" to="/BookShelf">我的书架</router-link>
                    </el-menu-item>
                    <el-menu-item index="2" style="height: 70px">
                        <i class="el-icon-document"></i>
                        <router-link style="text-decoration:none;" to="/MessageCenter">消息中心</router-link>
                    </el-menu-item>
                    <el-menu-item index="3" style="height: 70px;">
                        <i class="el-icon-setting"></i>
                        <router-link style="text-decoration:none;" to="/SafeCenter">安全中心</router-link>
                    </el-menu-item>
                </el-menu>
            </header>
        </div>
        <div style="width: 930px;height: 600px;float:left;margin-top: 20px">
                <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'BookShelf-left',
        data() {
            return {
                id: localStorage.getItem("id"),
                username: localStorage.getItem("username"),
                imgurl:localStorage.getItem("imgurl")
            }
        },
        created() {

        }
    }
</script>


<style scoped>


    .photo-background {
        border: 1px #FFB6C1 solid;
        width: 300px;
        height: 230px;
        background-color: skyblue;
    }
</style>
